<?php

use admin\assets\PageAsset;
use yii\jui\JuiAsset;
use yii\helpers\Url;
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
use ijony\admin\widgets\ActiveField;

/* @var $this yii\web\View */
/* @var $model admin\models\Products */
/* @var $form yii\bootstrap\ActiveForm  */

PageAsset::register($this)->init([
    'js' => [
        'js/laytpl.js',
        'js/jquery.uploadifive.js',
    ],
]);

JuiAsset::register($this);
?>

<?php $form = ActiveForm::begin([
    'fieldClass' => ActiveField::className(),
    'layout' => 'horizontal',
    'options' => [
        'enctype' => 'multipart/form-data',
        'class' => 'tabs-container',
    ],
    'enableClientValidation' => false,
    'enableClientScript' => false,
    'fieldConfig' => [
        'inline' => true,
        'template' => "{label}\n{beginWrapper}\n{input}\n{hint}\n{error}\n{endWrapper}",
        'horizontalCssClasses' => [
            'label' => 'col-sm-2',
            'offset' => 'col-sm-offset-2',
            'wrapper' => 'col-sm-10',
            'error' => '',
            'hint' => '',
        ],
    ],
]); ?>

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#tab-base">基础信息</a></li>
    <li class=""><a data-toggle="tab" href="#tab-gallery">产品组图</a></li>
</ul>

<div class="tab-content">
    <div id="tab-base" class="tab-pane active">
        <div class="panel-body">

            <?= $form->field($model, 'name')->textInput(['maxlength' => true]) ?>
            <?= $form->field($model, 'category_id')->select(['class' => '\admin\models\Categories']) ?>
            <?= $form->field($model, 'preview')->image() ?>
            <?= $form->field($model, 'veneer')->chosen(Yii::$app->params['veneer'], ['multiple' => true]) ?>
            <?= $form->field($model, 'outside_handle')->chosen(Yii::$app->params['outside_handle'], ['multiple' => true]) ?>
            <?= $form->field($model, 'inside_handle')->chosen(Yii::$app->params['inside_handle'], ['multiple' => true]) ?>
            <?= $form->field($model, 'lockset')->chosen(Yii::$app->params['lockset'], ['multiple' => true]) ?>
            <?= $form->field($model, 'status')->radioList($model->getStatusSelectData()) ?>

            <div class="form-group">
                <div class="col-sm-4 col-sm-offset-2">
                    <?= Html::resetButton('重置', ['class' => 'btn btn-white']) ?>
                    <?= Html::submitButton('保存', ['class' => 'btn btn-primary']) ?>
                </div>
            </div>
        </div>
    </div>

    <div id="tab-gallery" class="tab-pane">
        <div class="panel-body">
            <div class="gallery-list">
                <ul id="gallery-list" class="list-unstyled clearfix">
                    <li class="gallery-item">
                        <input id="upload-gallery" name="file_upload" type="file" multiple="multiple"/>
                        <input type="hidden" name="<?= Html::getInputName($model, 'galleries') ?>" value="0" />
                    </li>
                    <?php if(isset($model->galleries['image'])){ ?>
                        <?php foreach($model->galleries['image'] as $index => $image){ ?>
                            <li class="gallery-item sortable-item">
                                <a class="close" href="javascript:void(0)"></a>
                                <div class="notice"></div>
                                <div class="gallery-image">
                                    <img src="<?= $model->galleries['thumb'][$index] ?>">
                                    <input class="input-image" name="<?= Html::getInputName($model, 'galleries') ?>[thumb][]" type="hidden" value="<?= $model->galleries['thumb'][$index] ?>" />
                                    <input class="input-image" name="<?= Html::getInputName($model, 'galleries') ?>[image][]" type="hidden" value="<?= $image ?>" />
                                </div>
                            </li>
                        <?php } ?>
                    <?php } ?>
                </ul>
            </div>

            <div class="form-group">
                <div class="col-sm-4 col-sm-offset-2">
                    <?= Html::resetButton('重置', ['class' => 'btn btn-white']) ?>
                    <?= Html::submitButton('保存', ['class' => 'btn btn-primary']) ?>
                </div>
            </div>
        </div>
    </div>
</div>

<?php ActiveForm::end(); ?>

    <script id="galleryTpl" type="text/html">
        {{#  for(var i = 0; i < d.images.length; i++){ }}
        <li class="gallery-item sortable-item" id="uploadifive-upload-image-file-{{ i }}">
            <a class="close" href="javascript:void(0)"></a>
            <div class="notice"></div>
            <div class="gallery-image">
                <img src="{{ d.images[i].thumb }}">
                <input class="input-image" name="<?= Html::getInputName($model, 'galleries') ?>[thumb][]" type="hidden" value="{{ d.images[i].thumb }}" />
                <input class="input-image" name="<?= Html::getInputName($model, 'galleries') ?>[image][]" type="hidden" value="{{ d.images[i].image }}" />
            </div>
        </li>
        {{#  } }}
    </script>

<?php

$csrfToken = Yii::$app->request->getCsrfToken();
$csrfName = Yii::$app->request->csrfParam;
$uploadUrl = Url::to(['upload/image']);
$uploadTimestamp = time();
$uploadToken = md5('biffar_' . $uploadTimestamp);

$js = <<<JS

var galleryTpl = $('#galleryTpl').html();

$(document).on('click', '#chapter-content > .gallery-item > .close', function(){
    $(this).closest('.gallery-item').remove();
    return false;
});

$('#gallery-list').sortable({items : ".sortable-item"});

$('#upload-gallery').uploadifive({
    uploadScript: '$uploadUrl',
    width: '170',
    height: '170',
    buttonClass: 'add-gallery',
    buttonText: '<span class="fa fa-plus-circle"></span>新增图片',
    fileSizeLimit: 0,
    fileType: 'image/gif,image/jpeg,image/png',
    queueID: 'gallery-list',
    formData: {
        '$csrfName': '$csrfToken',
        'timestamp': '$uploadTimestamp',
        'token': '$uploadToken',
        'width': 170,
        'height': 170
    },
    overrideEvents: [
        'onUploadComplete'
    ],
    itemTemplate: $('<li>').addClass('gallery-item').addClass('sortable-item').addClass('uploadifive-queue-item')
        .append($('<a>').addClass('close').attr('href', 'javascript:void(0)'))
        .append($('<div>').addClass('notice'))
        .append($('<div>').addClass('progress').append($('<div>').addClass('progress-bar'))),
    onUploadComplete: function(file, data){
        data = $.parseJSON(data);
        
        if(data.error){
            file.queueItem.find('.progress').remove();
            file.queueItem.find('.notice').text(data.msg);
            toastr.error(data.msg);
        }else{
            file.queueItem.removeClass('uploadifive-queue-item');
            file.queueItem.find('.close').unbind('click');
            
            laytpl(galleryTpl).render(data, function(html){
                file.queueItem.after(html);
                file.queueItem.remove();
            });
        }
    }
});

JS;

$this->registerJs($js);